$basic_width: 1280;
$screen_width: 1280;
$pixis: 'px'; //单位

@for $i from 1 through 100 {
  // margin
  .m-#{$i}px {
    margin: #{$i / ($screen_width / $basic_width)}#{$pixis};
  }

  .mx-#{$i}px {
    margin-left: #{$i / ($screen_width / $basic_width)}#{$pixis};
    margin-right: #{$i / ($screen_width / $basic_width)}#{$pixis};
  }

  .my-#{$i}px {
    margin-top: #{$i / ($screen_width / $basic_width)}#{$pixis};
    margin-bottom: #{$i / ($screen_width / $basic_width)}#{$pixis};
  }

  .mt-#{$i}px {
    margin-top: #{$i / ($screen_width / $basic_width)}#{$pixis};
  }

  .mr-#{$i}px {
    margin-right: #{$i / ($screen_width / $basic_width)}#{$pixis};
  }

  .mb-#{$i}px {
    margin-bottom: #{$i / ($screen_width / $basic_width)}#{$pixis};
  }

  .ml-#{$i}px {
    margin-left: #{$i / ($screen_width / $basic_width)}#{$pixis};
  }

  // padding
  .p-#{$i}px {
    padding: #{$i / ($screen_width / $basic_width)}#{$pixis};
  }

  .px-#{$i}px {
    padding-left: #{$i / ($screen_width / $basic_width)}#{$pixis};
    padding-right: #{$i / ($screen_width / $basic_width)}#{$pixis};
  }

  .py-#{$i}px {
    padding-top: #{$i / ($screen_width / $basic_width)}#{$pixis};
    padding-bottom: #{$i / ($screen_width / $basic_width)}#{$pixis};
  }

  .pt-#{$i}px {
    padding-top: #{$i / ($screen_width / $basic_width)}#{$pixis};
  }

  .pr-#{$i}px {
    padding-right: #{$i / ($screen_width / $basic_width)}#{$pixis};
  }

  .pb-#{$i}px {
    padding-bottom: #{$i / ($screen_width / $basic_width)}#{$pixis};
  }

  .pl-#{$i}px {
    padding-left: #{$i / ($screen_width / $basic_width)}#{$pixis};
  }
}
